<template>
  <div class="publicBox" id="charecterNewbuild">

<el-form ref="form" :model="ruleForm"  class="demo-form-inline publicEditFrom"  label-width="160px" label-position="left">

<el-row>
     <div class="pubPageTagP">
               <p>角色管理/新建</p>
     </div>
</el-row>

<el-row>
         <el-form-item label="角色" prop="name">
                 <el-input v-model="ruleForm.name" 
                 v-if="!disabledFlag"
                 :rules="[{required: true, message: '请输入角色名称', trigger: 'blur' }]"
                 placeholder="请输入角色名称"
                 ></el-input>
                 <p v-else>{{ruleForm.name}}</p>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="角色描述" prop="remark">
                   <el-input
                     type="textarea"
                     :autosize="{ minRows: 2, maxRows: 4}"
                     placeholder="请输入角色描述"
                     v-model="ruleForm.remark">
                   </el-input>
       </el-form-item>
</el-row>

<el-row>
     <div class="tips">
               <span>权限列表</span>
               <span style="color:red">（选中表示该角色拥有该权限，未选中表示不拥有该权限）</span>
     </div>
</el-row>

<el-row class="tree_box">
        <el-tree
         :data="treeData"
         ref="tree"
         show-checkbox
         node-key="id"
         default-expand-all
         :props="defaultProps">
        </el-tree>
</el-row>

<el-row class="pubSubmitBtn-row">
           <el-form-item>
                         <el-button class="pubBtnBlue" type="primary" @click="submitForm">保存</el-button>
                         <el-button class="pubBtnGray" @click="$canCleFn"  type="primary">取消</el-button>
       </el-form-item>
</el-row>

</el-form>
    
  </div>
</template>

<script>

import * as API from '@api/system.js'
export default {
  components: {

  },
  data() {
    return {
    disabledFlag:false,
     userId:"",
     treeData:[],
     treeDataChecked:[],
     ruleForm:{
      name:"",
      remark:"",
     },
     defaultProps: {
          children: 'children',
          label: 'name'
     }
     }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {  
  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    setCheckedTree(data){      //设置节点树选中
        this.$refs.tree.setCheckedKeys(data);
    },
    getCheckedTree(){          //获取当前节点树选中节点
        return this.$refs.tree.getCheckedKeys()
    },
    getTreeFn(data,flag){   //目前只做两层数据处理,扁平化数据做成节点数据
            let arrayTree=[]
            let arrayTreeChe=[]
            for(let i in data){          //一级节点加入数组
                if(data[i].pid==-1){
                  data[i].children=[]
                  arrayTree.unshift(data[i])
                }
            }
            for(let i in data){          //二级子节点
               for(let j in arrayTree){          
                if(data[i].pid==arrayTree[j].id){
                    arrayTree[j].children.unshift(data[i])   //权限数据
                    arrayTreeChe.push(data[i].id)            //权限数据id
                }
            }
          }
          if(flag) arrayTree=arrayTreeChe
           return arrayTree
    },
    async editCharacterAPI(flag){       //获取权限数据
      let params={}
      if(flag) params={pid:this.userId}
      let res = await API.getpermissionsApi(params)
      if(flag) this.setCheckedTree(this.getTreeFn(res.Data.records,true))   //设置节点树进行节点选中处理,当前用户数据
      else     this.treeData=this.getTreeFn(res.Data.records )        //所有用户的权限数据
    },
    addCharacterAPI(){      //新增
          let params={pids:this.getCheckedTree(),name:this.ruleForm.name,remark:this.ruleForm.remark}
          API.addermissionsApi(params).then(res=>{
            if(res.IsPositive){
               this.$message.success({message:"操作成功"})
               this.$router.go(-1)
             }else{
               this.$message.error({message:res.ErrorCode})
             }
          })
    },
    listCharacterAPI(){        //编辑
          let params={id:this.userId,pids:this.getCheckedTree(),name:this.ruleForm.name,remark:this.ruleForm.remark}
          API.editCharacterAPI(params).then(res=>{
            if(res.IsPositive){
               this.$message.success({message:"操作成功"})
               this.$router.go(-1)
             }else{
               this.$message.error({message:res.ErrorCode})
             }
          })
    },
    submitForm() {
       if(this.disabledFlag) this.listCharacterAPI()
       else this.addCharacterAPI()
    }
  },
  created() {
           this.editCharacterAPI()
           if(Object.keys(this.$route.query).length>0){  
               this.disabledFlag=true        //true代表修改数据
               this.userId=this.$route.query.data.id
               this.ruleForm.name=this.$route.query.data.name
               this.ruleForm.remark=this.$route.query.data.remark
               this.editCharacterAPI(true)  //true代表修改数据
           }

  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>
#charecterNewbuild{
.tree_box{
    display: flex;
    padding-left: 5px;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #BBBBBB ;
    box-sizing: border-box;
    height: 221px;
}
.tips{
    margin: 15px 0 15px 0;
    color: #000000;
}
.el-tree{
    margin-top: 10px;
    width: 100%;
}
.el-tree>.el-tree-node {
    white-space: nowrap;
    outline: 0;
    float: left;
    width: 12.5%;
}
}

</style>